<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>北京大学校园导航</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=gfXEYso6gF84SwIw29zwwFDyxWOrWMzy"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            width: 100%;
            height: 100%;
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            overflow: hidden;
        }
        .container {
            display: flex;
            height: 100vh;
        }
        .map-area {
            width: 75%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        #map {
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .side-panel {
            width: 25%;
            height: 100vh;
            background-color: #f5f5f5;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .place-info {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .place-info h2 {
            color: #d00;
            margin-bottom: 10px;
            font-size: 22px;
        }
        .place-info p {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        .back-button {
            padding: 10px 15px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .back-button i {
            margin-right: 5px;
        }
        .back-button:hover {
            background-color: #d32f2f;
        }
        .route-panel {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .route-panel h3 {
            color: #3498db;
            margin-bottom: 15px;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        .route-panel h3 i {
            margin-right: 8px;
        }
        .route-input {
            margin-bottom: 15px;
        }
        .route-input label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        .route-input input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        .route-type {
            margin-bottom: 15px;
        }
        .route-type label {
            margin-right: 10px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
        }
        .route-type input {
            margin-right: 5px;
        }
        .plan-button {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .plan-button i {
            margin-right: 8px;
        }
        .plan-button:hover {
            background-color: #2980b9;
        }
        .route-result {
            margin-top: 15px;
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
            border-top: 1px solid #eee;
        }
        .internal-places-title {
            margin: 20px 0 10px;
            font-size: 16px;
            color: #555;
        }
        #internal-places {
            margin-top: 10px;
        }
        #internal-places .internal-place {
            padding: 10px;
            margin-bottom: 8px;
            background-color: #f9f9f9;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        #internal-places .internal-place:hover {
            background-color: #eef5ff;
            transform: translateY(-2px);
        }
        .internal-place h4 {
            margin-bottom: 5px;
            color: #3498db;
        }
        .internal-place p {
            font-size: 13px;
            color: #666;
        }
        .control-panel {
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .control-section {
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 10px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        .radio-group {
            display: flex;
            align-items: center;
        }
        .radio-group label {
            margin-right: 10px;
            cursor: pointer;
        }
        .btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
        }
        .btn-primary {
            background-color: #3498db;
        }
        .btn-primary:hover {
            background-color: #2980b9;
        }
        .btn-outline {
            background-color: transparent;
            border: 1px solid #3498db;
            color: #3498db;
        }
        .btn-outline:hover {
            background-color: #eef5ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="map-area">
            <div id="map"></div>
        </div>
        
        <div class="side-panel">
            <button class="back-button" onclick="goBack()">
                <i class="fas fa-arrow-left"></i> 返回地图
            </button>
            
            <div class="place-info">
                <h2 id="place-name">北京大学</h2>
                <p id="place-type"><i class="fas fa-tag"></i> 类型: 学校</p>
                <p id="place-address"><i class="fas fa-map-marker-alt"></i> 地址: 北京市海淀区颐和园路5号</p>
                <p id="place-description">北京大学（Peking University）简称"北大"，诞生于1898年，初名京师大学堂，是中国近代第一所国立大学，也是中国近代教育史上最早以"大学"之名创办的学校，其成立标志着中国近代高等教育的开端。</p>
                <p style="margin-top: 10px; color: #d00; font-weight: bold;"><i class="fas fa-info-circle"></i> 提示: 本页面显示北京大学内部地图，用于校内导航</p>
            </div>
            
            <div class="route-panel">
                <h3><i class="fas fa-route"></i> 路线规划</h3>
                
                <div class="control-panel">
                    <h1>北京大学导航</h1>
                    
                    <div class="control-section">
                        <h2>路线规划</h2>
                        <!-- 起点 -->
                        <div class="input-group">
                            <label for="start-point">出发地：</label>
                            <input type="text" id="start-point" placeholder="输入起点或在地图上选择">
                            <small>例如：北京大学-老化学楼</small>
                        </div>
                        
                        <!-- 目的地 -->
                        <div class="input-group">
                            <label for="end-points">目的地：</label>
                            <input type="text" id="end-points" placeholder="输入目的地，多个地点用中文逗号隔开">
                            <small>例如：北京大学-革命烈士纪念碑，北京大学-新生通道，北京大学-樱树林</small>
                        </div>
                        
                        <!-- 出行方式 -->
                        <div class="input-group">
                            <div class="radio-group">
                                <input type="radio" id="walking" name="travel-mode" value="walking" checked>
                                <label for="walking">步行</label>
                                
                                <input type="radio" id="riding" name="travel-mode" value="riding">
                                <label for="riding">骑行</label>
                            </div>
                        </div>
                        
                        <!-- 规划策略 -->
                        <div class="input-group">
                            <div class="radio-group">
                                <input type="radio" id="time" name="plan-strategy" value="time" checked>
                                <label for="time">时间最短</label>
                                
                                <input type="radio" id="distance" name="plan-strategy" value="distance">
                                <label for="distance">距离最短</label>
                            </div>
                        </div>
                        
                        <!-- 规划按钮 -->
                        <button id="start-plan-btn" class="btn btn-primary">开始规划</button>
                        
                        <a href="/network_editor.html" class="btn btn-outline" style="margin-top: 10px;">路线编辑工具</a>
                    </div>
                    
                    <!-- 规划结果显示区域 -->
                    <div id="route-result" class="route-result"></div>
                </div>
                
                <h3 class="internal-places-title">校内地点</h3>
                <div id="internal-places">
                    <p>加载中...</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let map;
        let startMarker = null;
        let endMarker = null;
        let routeLines = [];
        let internalMarkers = [];
        let PKU_ID = 360; // 北京大学ID默认值，修改以匹配数据库中的ID
        
        // 在页面加载完成后初始化地图
        window.onload = function() {
            console.log("页面加载完成，初始化地图...");
            initializeMap();
            
            // 从URL中获取地点ID（如果有）
            const pathname = window.location.pathname;
            const pathParts = pathname.split('/');
            
            // 无论URL中包含什么ID，都强制使用北京大学的ID
            console.log("无论传入什么ID，都将使用北京大学的ID360");
            PKU_ID = 360; // 强制使用北京大学ID
            
            console.log(`将使用ID=${PKU_ID}加载地点数据`);
            
            // 加载地点数据
            loadPlaceDetails();
            
            // 初始化地图事件和控件
            initMapEvents();
        };
        
        // 初始化地图
        function initializeMap() {
            try {
                console.log("开始初始化地图...");
                // 初始化地图
                map = new BMap.Map('map');
                map.enableScrollWheelZoom(true);
                
                // 添加地图控件
                map.addControl(new BMap.NavigationControl());     // 导航控件
                map.addControl(new BMap.ScaleControl());          // 比例尺控件
                map.addControl(new BMap.OverviewMapControl());    // 缩略图控件
                map.addControl(new BMap.MapTypeControl());        // 地图类型控件
                
                // 设置默认的地图中心点和缩放级别 - 北京大学
                const defaultPoint = new BMap.Point(116.317547, 39.99887); 
                map.centerAndZoom(defaultPoint, 16);
                
                // 添加默认标记
                endMarker = new BMap.Marker(defaultPoint);
                map.addOverlay(endMarker);
                
                // 道路拥挤度数据（模拟）
                window.roadCongestion = initRoadCongestionData();
                
                // 启用地图点击事件，用于选择起点
                enableMapClickForRoutePlanning();
                
                console.log("地图初始化完成");
            } catch (e) {
                console.error("地图初始化失败:", e);
                alert("地图初始化失败，请刷新页面重试");
            }
        }
        
        // 加载地点详情
        function loadPlaceDetails() {
            console.log(`正在请求地点数据，ID=${PKU_ID}...`);
            
            // 使用fetch API 请求地点详情
            fetch(`/api/places/${PKU_ID}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('API响应错误: ' + response.status);
                    }
                    return response.json();
                })
                .then(place => {
                    if (place.error) {
                        console.warn('获取地点数据失败:', place.error);
                        console.log('将使用默认的北京大学数据');
                    } else {
                        console.log("成功获取地点数据:", place);
                        
                        // 始终使用北大数据，忽略API返回的其他地点数据
                        document.getElementById('place-name').textContent = "北京大学";
                        document.getElementById('place-type').innerHTML = `<i class="fas fa-tag"></i> 类型: 学校`;
                        document.getElementById('place-address').innerHTML = `<i class="fas fa-map-marker-alt"></i> 地址: 北京市海淀区颐和园路5号`;
                        document.getElementById('place-description').textContent = "北京大学（Peking University）简称\"北大\"，诞生于1898年，初名京师大学堂，是中国近代第一所国立大学，也是中国近代教育史上最早以\"大学\"之名创办的学校，其成立标志着中国近代高等教育的开端。";
                        
                        // 设置为北大的经纬度和地图信息
                        updateMap(39.99887, 116.317547, "北京大学", place.outline);
                    }
                    
                    // 加载内部地点 - 无论API是否成功，都尝试加载内部地点
                    loadInternalPlaces(PKU_ID);
                })
                .catch(error => {
                    console.error('获取地点详情失败:', error);
                    console.log('将使用默认的北京大学数据');
                    // 设置为北大的经纬度
                    updateMap(39.99887, 116.317547, "北京大学", null);
                    loadInternalPlaces(PKU_ID);
                });
        }
        
        // 更新地图
        function updateMap(lat, lng, name, outline) {
            console.log("更新地图:", lat, lng, name);
            
            try {
                // 更新中心点
                const point = new BMap.Point(lng, lat);
                map.panTo(point);
                
                // 更新标记
                if (endMarker) {
                    map.removeOverlay(endMarker);
                }
                
                endMarker = new BMap.Marker(point);
                map.addOverlay(endMarker);
                
                // 如果有轮廓数据，添加轮廓
                if (outline && outline !== "") {
                    try {
                        const outlineData = JSON.parse(outline);
                        if (outlineData && outlineData.results && outlineData.results.length > 0) {
                            const result = outlineData.results[0];
                            if (result.geo && result.geo.length > 0) {
                                const points = [];
                                const coords = result.geo[0].coordinates[0];
                                
                                for (let i = 0; i < coords.length; i++) {
                                    const outlineLng = coords[i][0];
                                    const outlineLat = coords[i][1];
                                    points.push(new BMap.Point(outlineLng, outlineLat));
                                }
                                
                                if (points.length > 2) {
                                    const polygon = new BMap.Polygon(points, {
                                        strokeColor: "#5555ff",
                                        strokeWeight: 2,
                                        strokeOpacity: 0.5,
                                        fillColor: "#5555ff",
                                        fillOpacity: 0.2
                                    });
                                    
                                    map.addOverlay(polygon);
                                }
                            }
                        }
                    } catch (e) {
                        console.error('解析轮廓数据失败:', e);
                    }
                }
            } catch (e) {
                console.error("更新地图时出错:", e);
            }
        }
        
        // 加载内部地点
        function loadInternalPlaces(placeId) {
            console.log(`正在加载ID=${placeId}的内部地点...`);
            
            fetch(`/api/places/${placeId}/internal`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取内部地点API响应错误: ' + response.status);
                    }
                    return response.json();
                })
                .then(places => {
                    console.log(`成功获取${places.length}个内部地点`);
                    
                    // 清除现有内部地点标记
                    for (let i = 0; i < internalMarkers.length; i++) {
                        map.removeOverlay(internalMarkers[i]);
                    }
                    internalMarkers = [];
                    
                    if (!places || places.length === 0) {
                        document.getElementById('internal-places').innerHTML = '<p>暂无校内地点数据</p>';
                        return;
                    }
                    
                    // 添加内部地点标记到地图
                    places.forEach(place => {
                        if (place.latitude && place.longitude) {
                            const point = new BMap.Point(place.longitude, place.latitude);
                            const marker = new BMap.Marker(point, {
                                icon: new BMap.Icon("https://api.map.baidu.com/images/marker_red_sprite.png", new BMap.Size(19, 25))
                            });
                            
                            // 添加点击事件
                            marker.addEventListener('click', function() {
                                const infoWindow = new BMap.InfoWindow(
                                    `<div style="max-width:200px;">
                                        <h3 style="margin:5px 0;color:#d00;">${place.name}</h3>
                                        <p>${place.description || '无详细描述'}</p>
                                    </div>`
                                );
                                this.openInfoWindow(infoWindow);
                            });
                            
                            map.addOverlay(marker);
                            internalMarkers.push(marker);
                        }
                    });
                    
                    // 在侧边栏显示内部地点列表
                    let html = '';
                    places.forEach(place => {
                        if (place.latitude && place.longitude) {
                            html += `
                                <div class="internal-place" onclick="centerOnInternalPlace(${place.longitude}, ${place.latitude}, '${place.name}')">
                                    <h4>${place.name}</h4>
                                    <p>${place.description || '无详细描述'}</p>
                                </div>
                            `;
                        }
                    });
                    document.getElementById('internal-places').innerHTML = html || '<p>暂无校内地点数据</p>';
                })
                .catch(error => {
                    console.error('获取内部地点失败:', error);
                    document.getElementById('internal-places').innerHTML = '<p>获取校内地点数据失败</p>';
                });
        }
        
        // 切换到内部地点
        function centerOnInternalPlace(lng, lat, name) {
            if (!lng || !lat) return;
            
            const point = new BMap.Point(lng, lat);
            map.centerAndZoom(point, 19); // 设置更高的缩放级别以查看详细
            
            // 查找并点击对应的标记
            for (let i = 0; i < internalMarkers.length; i++) {
                const pos = internalMarkers[i].getPosition();
                if (pos.lng === lng && pos.lat === lat) {
                    internalMarkers[i].dispatchEvent("click");
                    break;
                }
            }
        }
        
        // 返回dashboard
        function goBack() {
            window.location.href = '/dashboard';
        }
        
        // 启用地图点击事件，用于选择起点
        function enableMapClickForRoutePlanning() {
            map.addEventListener("click", function(e) {
                if (confirm("是否将此位置设为起点?")) {
                    if (startMarker) map.removeOverlay(startMarker);
                    startMarker = new BMap.Marker(e.point);
                    startMarker.setIcon(new BMap.Icon("https://api.map.baidu.com/images/marker_red_sprite.png", new BMap.Size(23, 25)));
                    startMarker.setLabel(new BMap.Label("起点", {offset: new BMap.Size(20, 0)}));
                    map.addOverlay(startMarker);
                    
                    // 获取详细地址
                    var geocoder = new BMap.Geocoder();
                    geocoder.getLocation(e.point, function(result) {
                        if (result) {
                            document.getElementById("start-point").value = result.address;
                        }
                    });
                }
            });
        }
        
        // 规划自定义路线（新函数）
        function planCustomRoute() {
            var startAddress = document.getElementById("start-point").value;
            var endPointsStr = document.getElementById("end-points").value;
            
            if (!startAddress) {
                alert("请输入起点或在地图上选择");
                return;
            }
            
            if (!endPointsStr) {
                alert("请输入至少一个目的地");
                return;
            }
            
            // 解析目的地（按中文逗号分隔）
            var destinations = endPointsStr.split("，");
            console.log("目的地数量:", destinations.length);
            
            // 获取出行方式和规划策略
            var travelMode = document.querySelector('input[name="travel-mode"]:checked').value;
            var planStrategy = document.querySelector('input[name="plan-strategy"]:checked').value;
            
            // 显示加载中
            var routeResultDiv = document.getElementById("route-result");
            routeResultDiv.innerHTML = "<p style='text-align:center;'><i class='fas fa-spinner fa-spin'></i> 正在规划路线...</p>";
            
            // 获取起点坐标
            var startPoint;
            if (startMarker) {
                // 已有起点标记
                startPoint = {
                    lng: startMarker.getPosition().lng,
                    lat: startMarker.getPosition().lat,
                    name: startAddress
                };
                processRouteRequest(startPoint, destinations, travelMode, planStrategy);
            } else {
                // 寻找起点的区域内节点
                fetch(`/api/find_nearest_node?lng=116.31&lat=39.99&name=${encodeURIComponent(startAddress)}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            throw new Error(data.error);
                        }
                        
                        // 设置起点标记
                        var point = new BMap.Point(data.longitude, data.latitude);
                        if (startMarker) map.removeOverlay(startMarker);
                        startMarker = new BMap.Marker(point);
                        startMarker.setIcon(new BMap.Icon("https://api.map.baidu.com/images/marker_red_sprite.png", new BMap.Size(23, 25)));
                        startMarker.setLabel(new BMap.Label("起点", {offset: new BMap.Size(20, 0)}));
                        map.addOverlay(startMarker);
                        
                        startPoint = {
                            lng: data.longitude,
                            lat: data.latitude,
                            name: startAddress
                        };
                        processRouteRequest(startPoint, destinations, travelMode, planStrategy);
                    })
                    .catch(error => {
                        console.error('查找起点失败:', error);
                        alert('无法找到起点，尝试使用地图上点击选择起点');
                        routeResultDiv.innerHTML = "";
                    });
            }
        }
        
        // 处理路线规划请求
        function processRouteRequest(startPoint, destinationNames, travelMode, planStrategy) {
            // 清除现有路线
            clearRoutes();
            
            // 准备设定目的地数据
            var destinationsData = [];
            
            // 查找每个目的地的最近节点
            var pendingLookups = destinationNames.length;
            var lookupErrors = [];
            
            // 如果没有目的地
            if (pendingLookups === 0) {
                document.getElementById("route-result").innerHTML = "<p>请指定有效的目的地</p>";
                return;
            }
            
            // 查找每个目的地
            destinationNames.forEach((destName, index) => {
                fetch(`/api/find_nearest_node?lng=116.31&lat=39.99&name=${encodeURIComponent(destName)}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            lookupErrors.push(`无法找到目的地: ${destName}`);
                        } else {
                            destinationsData.push({
                                lng: data.longitude,
                                lat: data.latitude,
                                name: destName,
                                id: data.id
                            });
                        }
                    })
                    .catch(error => {
                        lookupErrors.push(`查找目的地时出错: ${destName}`);
                    })
                    .finally(() => {
                        pendingLookups--;
                        if (pendingLookups <= 0) {
                            // 所有地点查询完成
                            if (destinationsData.length === 0) {
                                document.getElementById("route-result").innerHTML = 
                                    "<p>无法找到任何目的地</p>" + 
                                    (lookupErrors.length > 0 ? "<ul>" + lookupErrors.map(e => `<li>${e}</li>`).join('') + "</ul>" : "");
                            } else {
                                // 发送路线请求
                                sendRoutingRequest(startPoint, destinationsData, travelMode, planStrategy);
                            }
                        }
                    });
            });
        }
        
        // 发送路线请求并处理结果
        function sendRoutingRequest(startPoint, destinations, travelMode, planStrategy) {
            var requestData = {
                startPoint: {
                    name: startPoint.name,
                    lng: startPoint.lng,
                    lat: startPoint.lat
                },
                destinations: destinations,
                isBiking: travelMode === "riding",
                isTimeOptimized: planStrategy === "time"
            };
            
            fetch('/api/route_planning', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('路线规划API返回错误: ' + response.status);
                }
                return response.json();
            })
            .then(routePlan => {
                if (!routePlan.success) {
                    throw new Error(routePlan.message || '路线规划失败');
                }
                
                displayRoutePlan(routePlan, travelMode, planStrategy);
            })
            .catch(error => {
                console.error('路线规划失败:', error);
                document.getElementById("route-result").innerHTML = 
                    "<div style='padding: 10px; background: #fff0f0; border-radius: 5px;'>" +
                    "<p><i class='fas fa-exclamation-circle'></i> 路线规划失败: " + error.message + "</p>" +
                    "</div>";
            });
        }
        
        // 显示路线规划结果
        function displayRoutePlan(routePlan, travelMode, planStrategy) {
            // 清除现有路线
            clearRoutes();
            
            // 获取路线数据
            const pathInfo = routePlan.path;
            
            if (!pathInfo) {
                document.getElementById("route-result").innerHTML = "<p>路线规划失败，未获取到路径数据</p>";
                return;
            }
            
            // 准备路线相关数据
            const isMultipleDestinations = routePlan.destinations && routePlan.destinations.length > 1;
            const isBiking = travelMode === "riding";
            const pathColor = isBiking ? "#FFC107" : "#FF4081"; // 骑黄色，步行红色
            
            // 获取路线段的几何数据并绘制
            if (pathInfo.geometry) {
                // 单目的地路线
                const points = pathInfo.geometry.map(p => new BMap.Point(p.lng, p.lat));
                
                // 创建并添加路线
                const polyline = new BMap.Polyline(points, {
                    strokeColor: pathColor,
                    strokeWeight: 4,
                    strokeOpacity: 0.7
                });
                
                map.addOverlay(polyline);
                routeLines.push(polyline);
                
                // 调整视图以显示整个路线
                map.setViewport(points);
                
            } else if (pathInfo.pathSegments && pathInfo.pathSegments.length > 0) {
                // 多目的地路线
                const allPoints = [];
                
                // 依次绘制各路线
                pathInfo.pathSegments.forEach((segment, index) => {
                    if (segment.geometry && segment.geometry.length > 0) {
                        const points = segment.geometry.map(p => new BMap.Point(p.lng, p.lat));
                        allPoints.push(...points);
                        
                        // 随机调整颜色使得各路段相间
                        const segmentColor = getSegmentColor(index, isBiking);
                        
                        // 创建并添加路线
                        const polyline = new BMap.Polyline(points, {
                            strokeColor: segmentColor,
                            strokeWeight: 4,
                            strokeOpacity: 0.7
                        });
                        
                        map.addOverlay(polyline);
                        routeLines.push(polyline);
                        
                        // 添加起点和终点标记
                        if (index === 0) {
                            // 起点已有标记
                        } else {
                            // 中间节点添加标记
                            const startPoint = points[0];
                            const startMarker = new BMap.Marker(startPoint);
                            startMarker.setIcon(new BMap.Icon(
                                "https://api.map.baidu.com/images/marker_red_sprite.png", 
                                new BMap.Size(19, 25)
                            ));
                            
                            // 添加序号标记
                            startMarker.setLabel(new BMap.Label((index).toString(), {
                                offset: new BMap.Size(5, 0),
                                style: { backgroundColor: '#fff', border: '1px solid #f00', borderRadius: '50%', color: '#f00', padding: '2px 6px' }
                            }));
                            
                            map.addOverlay(startMarker);
                            routeLines.push(startMarker);
                        }
                        
                        // 添加终点标记（最后一段的结尾）
                        if (index === pathInfo.pathSegments.length - 1) {
                            const endPoint = points[points.length - 1];
                            const endMarker = new BMap.Marker(endPoint);
                            endMarker.setIcon(new BMap.Icon(
                                "https://api.map.baidu.com/images/marker_red_sprite.png", 
                                new BMap.Size(19, 25)
                            ));
                            endMarker.setLabel(new BMap.Label("终点", {offset: new BMap.Size(20, 0)}));
                            map.addOverlay(endMarker);
                            routeLines.push(endMarker);
                        }
                    }
                });
                
                // 调整视图以显示整个路线
                if (allPoints.length > 0) {
                    map.setViewport(allPoints);
                }
            }
            
            // 显示路线结果
            generateRouteResultHTML(routePlan, travelMode, planStrategy);
        }
        
        // 生成路线结果HTML
        function generateRouteResultHTML(routePlan, travelMode, planStrategy) {
            const pathInfo = routePlan.path;
            const isMultipleDestinations = routePlan.destinations && routePlan.destinations.length > 1;
            const isBiking = travelMode === "riding";
            
            // 计算总速度距离和时间
            let totalDistance = 0;
            let totalTime = 0;
            
            if (pathInfo.pathSegments) {
                // 多目的地路线，计算每段的总体距离
                pathInfo.pathSegments.forEach(segment => {
                    totalDistance += segment.distance || 0;
                    totalTime += segment.time || 0;
                });
            } else {
                // 单目的地路线
                totalDistance = pathInfo.distance || 0;
                totalTime = pathInfo.time || 0;
            }
            
            // 转换总时间为小时和分钟
            const totalMinutes = Math.round(totalTime);
            const hours = Math.floor(totalMinutes / 60);
            const minutes = totalMinutes % 60;
            
            let timeText = "";
            if (hours > 0) {
                timeText += hours + "小时";
            }
            if (minutes > 0 || hours === 0) {
                timeText += minutes + "分钟";
            }
            
            // 生成结果HTML
            let html = "<div style='padding: 10px; background: #f9f9f9; border-radius: 5px;'>";
            
            if (isBiking) {
                html += "<h3 style='margin-bottom: 10px;'><i class='fas fa-bicycle'></i> " + 
                    (isMultipleDestinations ? "多点骑行路线" : "骑行路线") + "</h3>";
            } else {
                html += "<h3 style='margin-bottom: 10px;'><i class='fas fa-walking'></i> " + 
                    (isMultipleDestinations ? "多点步行路线" : "步行路线") + "</h3>";
            }
            
            html += "<p><strong>总距离:</strong> " + (totalDistance / 1000).toFixed(2) + " 公里</p>";
            html += "<p><strong>预计总用时:</strong> " + timeText + "</p>";
            
            // 访问顺序
            if (isMultipleDestinations && pathInfo.pathSegments && pathInfo.pathSegments.length > 0) {
                html += "<p><strong>访问顺序:</strong></p>";
                html += "<ol style='margin: 10px 0 10px 20px;'>";
                
                // 添加起点
                html += "<li>" + routePlan.startPoint + " (起点)</li>";
                
                // 显示访问顺序
                for (let i = 0; i < pathInfo.pathSegments.length; i++) {
                    const segment = pathInfo.pathSegments[i];
                    if (segment.endName) {
                        html += "<li>" + segment.endName + "</li>";
                    }
                }
                
                html += "</ol>";
            }
            
            // 路线提示
            if (planStrategy === "time") {
                html += "<p><small>已考虑道路拥挤度因素，优先时间最短</small></p>";
            } else {
                html += "<p><small>优先距离最短</small></p>";
            }
            
            html += "</div>";
            
            // 显示结果
            document.getElementById("route-result").innerHTML = html;
        }
        
        // 获取路段的颜色
        function getSegmentColor(index, isBiking) {
            // 骑行黄色系，步行粉色系
            const bikingColors = ["#FFC107", "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"];
            const walkingColors = ["#FF4081", "#F50057", "#E91E63", "#D81B60", "#C2185B"];
            
            const colors = isBiking ? bikingColors : walkingColors;
            return colors[index % colors.length];
        }
        
        // 初始化道路拥挤度数据（模拟）
        function initRoadCongestionData() {
            // 模拟北大各区域的拥挤度数据
            // 值范围：0-1，值越小表示越拥挤，实际速度=拥挤度*理想速度
            return {
                "北区": 0.85,     // 北区不太拥挤
                "西区": 0.8,      // 西区较不拥挤
                "东区": 0.7,      // 东区中拥挤
                "南区": 0.75,     // 南区中偏上
                "走廊": 0.5,      // 主走廊非常拥挤
                "校内主干道": 0.65,  // 主干道拥挤度中
                "图书馆区域": 0.45,   // 图书馆区域较拥挤
                "食堂区域": 0.4,    // 食堂区域非常拥挤
                "教学楼区域": 0.55,    // 教学楼区域比较拥挤
                "宿舍区域": 0.65,    // 宿舍区域中拥挤
                "朐湖周边": 0.5,     // 朐湖周边相对拥挤
                "博雅塔附近": 0.45,    // 博雅塔附近较拥挤
                "办公区域": 0.7,     // 办公区域中偏上
                "运动场区域": 0.9,     // 运动场区域不拥挤
                "默认": 0.7       // 默认拥挤度
            };
        }
        
        // 初始化地图事件和控件
        function initMapEvents() {
            // 规划按钮点击事件
            document.getElementById("start-plan-btn").addEventListener("click", planCustomRoute);
        }
        
        // 清除路线
        function clearRoutes() {
            for (var i = 0; i < routeLines.length; i++) {
                map.removeOverlay(routeLines[i]);
            }
            routeLines = [];
        }
    </script>
</body>
</html> 